<template>
  <dv-border-box-10 v-show="Istheme == '0'">
    <el-card class="guandao_box">
      <div id="mychar">
        <div class="line" :style="{ transform: ` rotate(${yaw}deg)` }"></div>
        <div class="text">{{ yaw }}</div>
      </div>

      <div id="mychar2">
        <div class="line" :style="{ transform: ` rotate(${pitch}deg)` }"></div>
        <div class="text">{{ pitch }}</div>
      </div>

      <div id="mychar3">
        <div class="line" :style="{ transform: ` rotate(${roll}deg)` }"></div>
        <div class="text">{{ roll }}</div>
      </div>

    </el-card>
  </dv-border-box-10>

  <dv-border-box-12 v-show="Istheme == '1'">
    <el-card class="guandao_box">
      <div id="mychar">
        <div class="line" :style="{ transform: ` rotate(${yaw}deg)` }"></div>
        <div class="text">{{ yaw }}</div>
      </div>
      <div id="mychar2">
        <div class="line" :style="{ transform: ` rotate(${pitch}deg)` }"></div>
        <div class="text">{{ pitch }}</div>
      </div>
      <div id="mychar3">
        <div class="line" :style="{ transform: ` rotate(${roll}deg)` }"></div>
        <div class="text">{{ roll }}</div>
      </div>
    </el-card>
  </dv-border-box-12>
</template>

<script>
export default {
  data() {
    return {
      yaw: 12.6,
      pitch: 21.8,
      roll: 30,
      wsUrl: 'wss://s4.v100.vip:16856/ws',
      socket: null,
    }
  },
  mounted() {
    // this.init()
  },
  computed: {
    Istheme() {
      return this.$store.state.global.theme
    },
  },
  methods: {
    init() {
      if (typeof (WebSocket) === "undefined") {
        alert("您的浏览器不支持socket")
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.wsUrl)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
      console.log("socket连接成功")
    },
    error: function () {
      console.log("连接错误")
    },
    getMessage: function (msg) {
      console.log(msg.data)
    },
    // 发送消息给被连接的服务端
    send: function (params) {
      this.socket.send(params)
    },
    close: function () {
      console.log("socket已经关闭")
    },
  }
}
</script>

<style lang="scss" scoped>
.guandao_box {
  background: transparent;
  border: none;
  padding: 0;
  height: 200px;
  width: 100%;

  #mychar {
    width: 160px;
    height: 160px;

    background: url("../../../assets/1.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    border-radius: 50%;

    .line {
      width: 20px;
      height: 130px;
      background: url("../../../assets/line.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      // transform-origin: 10px 70px;
      transition-duration: 0s;
    }

    .text {
      width: 60px;
      height: 20px;
      text-align: center;
      color: #e7ad0d;
      position: absolute;
      left: calc(50% - 30px);
      bottom: 30px;
    }
  }

  #mychar2 {
    width: 160px;
    height: 160px;
    background: url("../../../assets/2-1.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    border-radius: 50%;

    .line {

      width: 110px;
      height: 30px;
      background: url("../../../assets/2.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      // transform-origin: 10px 70px;
      transition-duration: 0.5s;
    }

    .text {
      width: 60px;
      height: 20px;
      text-align: center;
      color: #e7c60d;
      position: absolute;
      left: calc(50% - 30px);
      bottom: 30px;
    }
  }

  #mychar3 {
    width: 160px;
    height: 160px;
    background: url("../../../assets/2-1.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    border-radius: 50%;

    .line {
      margin-top: 20px;
      width: 110px;
      height: 30px;
      background: url("../../../assets/3.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      // transform-origin: 10px 70px;
      transition-duration: 0s;
    }

    .text {
      width: 60px;
      height: 20px;
      text-align: center;
      color: #e7ad0d;
      position: absolute;
      left: calc(50% - 30px);
      bottom: 30px;
    }
  }
}

::v-deep .el-card__body {
  display: flex;
  justify-content: space-between;
}
</style>